<template>
	<view>
		<view class="head-fixed">
			<view class="status-bar"></view>
			<view class="deatail-head">
				<view class="detail-head-left">
					<uni-icons type="arrowleft" size="22" @click="backPage" />
				</view>
				<view class="detail-head-right">
					<view class="youxiang"  v-if="!baseConfig.isIOSshenhe" @click="ToEmail">
						<image src="/static/img/Details/detail_06.png" class="youx-img"></image> 发送至邮箱
					</view>
					<view class="share" @click="ToShare">
						<image src="/static/img/Details/share.png" class="share-img"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="detatil-content">
			<view class="detail-title">{{detailData.title}}</view>
			<view class="star-time">开始时间:{{sdate}}</view>
			<view class="star-time">结束时间:{{edate}}</view>
			<view class="daojishi">
				<image src="../../../static/img/Details/dingshi.png" class="naozhong"></image>
				报名剩余时间：
				<uni-countdown :day="testday" :hour="testHour" :minute="testMinute" :second="testSecond" color="#FFFFFF"
					background-color="#ff0018" border-color="#ff0018" v-if="iszhaobiao==1" />
				<view v-else>已结束</view>
			</view>
			<view class="fengxianTips">
				风险提示：以上信息是由采招网会员发布，尽管我们认为该信息可靠，
				但我们不能保证该信息的准确性及完整性，请各位务必在交易前进一步核实，
				采招网对此不负任何法律责任！声明：采招网登载此文出于传递更多信息之目的，
				并不意味着赞同其观点或证实其描述，请各投标单位核实
			</view>
			<view class="zhengwen">
				<view class="miaoshu-title">项目描述</view>
				<view v-bind:class="[showMoreBtn?'zhengwen-text-more':'', 'zhengwen-text']">
					<!-- <jyf-parser ref="article">{{detailData.content}}</jyf-parser> -->
					<view class="v_html" v-html="detailData.content"></view>
				</view>
				<view class="zhengwen-more" v-if="showMoreBtn">
					<view class="zhengwen_mask"></view>
					<view class="more-btn" @click="ShowMore">
						查看剩余详情>>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer-input">
				<input placeholder="搜索装修" confirm-type="search" v-model="keywords" type="text" @confirm="confirm" />
			</view>
			<view class="footer-icon footer-tel" v-if="isTel" @click="kefuTel">
				<image src="/static/img/shouji.png"></image>
			</view>
			<view :class="[isKeep?'footer-collaged':'footer-collage']" @tap="keep()">
			</view>
			<view class="footer-icon footer-index">
				<image src="/static/img/Details/detail_27.png" @tap="home()"></image>
			</view>
		</view>
		<!-- 发送至邮箱 -->
		<uni-popup ref="showimage" :type="type" :mask-click="true">
			<view class="youxiang-pop">
				<view class="youxiang-pop_content">
					<image src="/static/img/Details/youxiang.png" class="youxiang_img"></image>
					<view class="youxiang_text1">还差一步</view>
					<view class="youxiang_text2">输入邮箱即可继续发送</view>
					<view class="youxiang_input">
						<input type="text" v-model="Email" placeholder="请填写您的邮箱" placeholder-style="color:#bebec1;" />
					</view>
					<view class="youxiang-btn" @click="fasong">确认并导出</view>
					<view class="youxiang-tips">
						<view style="color: #f8080e;">温馨提示：</view>
						<view>输入邮箱后，如果长时间没有收到邮件请检查您的垃圾箱或重新发送</view>
					</view>
				</view>
				<view class="huiyuan_close" @click="cancel('image')">
					<image src="/static/img/Details/huiyuan_close.png" class="close-img"></image>
				</view>
			</view>
		</uni-popup>

	</view>
</template>
<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	// import jyfparser from '@/components/jyf-parser/jyf-parser.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	import appShare, {
		closeShare
	} from '@/common/static/share.js'
	export default {
		components: {
			uniPopup,
			// jyfparser,
			uniNavBar,
			uniIcons,
			uniCountdown
		},
		data() {
			return {
				type: '',
				detailData: {},
				showMoreBtn: true,
				isKeep: false, //收藏
				isBindFullData: false,
				Email: '', //发送邮箱
				keywords: '',
				isLogin: false,
				isAllowed: false,
				kefutel: this.serverTelHost,
				isTel: true,
				testday: 0,
				testHour: 0,
				testMinute: 0,
				testSecond: 0,
				edate: '1900-01-01 00:00:00',
				sdate: '1900-01-01 00:00:00',
				iszhaobiao: 1,
			}
		},
		onShow() {
			this.checkLogin();
			this.getDetail();
		},
		onLoad(options) {
			this.checkLogin();
			if (options.data != undefined) {
				this.detailData = JSON.parse(decodeURIComponent(options.data));
			}
		},
		created() {
			setTimeout(() => {
				this.testday = this.detailData.days
				this.testHour = this.detailData.hour
				this.testMinute = this.detailData.minutes
				this.testSecond = this.detailData.seconds
			}, 2000)
		},
		methods: {
			//返回上一页
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			getDetail() {
				console.log("getDetail::" + this.detailData.id)
				if (this.detailData.id > 0) {
					uni.showNavigationBarLoading();
					let data = this.initNewData();
					data.from = 4038;
					data.location = 5105;
					data.id = this.detailData.id;
					uni.request({
						url: this.baseConfig.serverURL + 'zhaobiao/Detail.ashx', //检查更新的服务器地址
						data: data,
						method: "POST",
						header: {
							"content-type": "application/x-www-form-urlencoded" //"application/json"
						},
						success: (res) => {
							uni.hideToast();
							if (res.statusCode == 200) {
								if (!res.data.ret) {
									uni.showToast({
										title: res.data.msg,
										icon: "none"
									});
								} else {
									if (res.data.other2 != undefined) {
										this.detailData = res.data.other2;
										console.log(this.detailData)
										this.kefutel = res.data.other2.kefutel
										if (this.kefutel.trim() == '') {
											console.log(this.kefutel)
											this.isTel = false;
										}
										this.isKeep = this.detailData.isshoucang;
										this.isLogin = this.detailData.isLogin;
										if (this.detailData.time)
											this.sdate = this.detailData.time.replace('T', ' ');
										if (this.detailData.enddate)
											this.edate = this.detailData.enddate.replace('T', ' ');
										// if (this.detailData.days != undefined)
										// 	this.testday = this.detailData.days;
										// if (this.detailData.hour != undefined)
										// 	this.testHour = this.detailData.hour;
										// if (this.detailData.minutes != undefined)
										// 	this.testMinute = this.detailData.minutes;
										// if (this.detailData.seconds != undefined)
										// 	this.testSecond = this.detailData.seconds;
										if (this.detailData.zhaobiaozhong != undefined)
											this.iszhaobiao = this.detailData.zhaobiaozhong;
										console.log(this.detailData);
									} else {
										uni.showToast({
											title: '获取详情失败！',
											icon: "none"
										});
									}
								}
							} else {
								uni.showToast({
									title: '获取详情失败！',
									icon: "none"
								});
							}
							this.isBindFullData = true;
							uni.hideNavigationBarLoading(); //关闭加载动画
						},
						fail: (res) => {
							uni.showToast({
								title: '获取详情失败！',
								icon: "none"
							});
							uni.hideNavigationBarLoading(); //关闭加载动画
						}
					})
				}
			},
			//收藏
			keep() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/user/login/login1'
					})
					return false;
				} else if (this.detailData.id > 0) {
					let data = this.initNewData();
					data.from = 4038;
					data.location = 5106;
					data.id = this.detailData.id;
					uni.request({
						url: this.baseConfig.serverURL + 'user/shoucang/AddHandler.ashx', //检查更新的服务器地址
						data: data,
						method: "POST",
						header: {
							"content-type": "application/x-www-form-urlencoded" //"application/json"
						},
						success: (res) => {
							if (res.statusCode == 200) {
								if (!res.data.ret) {
									uni.showToast({
										title: res.data.msg,
										icon: "none"
									});
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: "none"
									});
									if (res.data.retbs == 1)
										this.isKeep = true;
									else if (res.data.retbs == 2)
										this.isKeep = false;
								}
							} else {
								uni.showToast({
									title: '收藏失败！',
									icon: "none"
								});
							}
						},
						fail: (res) => {
							uni.showToast({
								title: '收藏失败！',
								icon: "none"
							});
						}
					})
				}
			},
			//底部返回首页
			home() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			togglePopup(type, open) {
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})

			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			fasong() {
				//异步请求数据
				let data = this.initNewData();
				data.from = 4038;
				data.location = 5105;
				data.nid = this.detailData.id;
				data.tomail = this.Email;
				uni.request({
					url: this.baseConfig.serverURL + 'User/Email/SendToEmail.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						//console.log(res);
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							} else {
								//获取成功，绑定
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
								this.$refs.showimage.close()
							}
						} else {
							uni.showToast({
								title: '发送失败！',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '发送失败！',
							icon: "none"
						});
					}
				})

			},
			ShowMore() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/user/login/login1'
					})
				} else {
					this.showMoreBtn = false;
				}

			},
			confirm() {
				let keywords = this.keywords
				uni.navigateTo({
					url: '/pages/search/searchList?keysword=' + encodeURIComponent(keywords)
				})
			},
			kefuTel() {
				uni.makePhoneCall({
					phoneNumber: this.kefutel
				});
			},
			downloadClick() {
				this.checkLogin(1);
				if (this.isxiazai) {
					uni.navigateTo({
						url: '/pages/xiangmu/download-webview?id=' + this.detailData.id
					})
					//this.togglePopup('center', 'image2')
				} else {
					this.togglePopup('center', 'image3')
				}

			},
			kaitong() {
				uni.navigateTo({
					url: '/pages/user/huiyuan/payment'
				})
			},
			ToEmail() {
				//this.checkLogin(1);
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/user/login/login1'
					})
				} else {
					this.togglePopup('center', 'image')
				}
			},
			ToShare() {
				if (uni.getSystemInfoSync().platform == 'ios' && this.detailData.id > 0) {
					let shareData = {
						shareImg: 'https://img.bidcenter.com.cn/app/images/logo.png',
						shareUrl: "https://interface.bidcenter.com.cn/web/share/zbshare.aspx?id=" + this.detailData.id,
						shareTitle: this.detailData.title || "采招网--招标网|招标公告|工程招标采购信息",
						shareContent: "中国采招网是招标网中致力于为企业提供招标、采购、拟在建项目信息及网上招标采购等服务的招标网;采招网是中国招标网站采购领域的最佳资讯和交易招标网站，为各级政府采购、招标代理机构、招标企业、供应商提供强大的专业招标采购信息查询和相关服务,中国第一招标网"
					};
					// 调用
					let shareObj = appShare(shareData, res => {
						console.log("分享成功回调", res);
						closeShare();
					});
				} else {
					let shareInfo = {
						href: "https://m.bidcenter.com.cn/help/downloadapp.shtml", //"https://interface.bidcenter.com.cn/web/share/zbshare.aspx?id=" + this.detailData.id,
						title: this.detailData.title || "采招网-招标网|招标公告|工程招标采购信息",
						desc: this.detailData.title ||
							"中国采招网是招标网中致力于为企业提供招标、采购、拟在建项目信息及网上招标采购等服务的招标网;采招网是中国招标网站采购领域的最佳资讯和交易招标网站，为各级政府采购、招标代理机构、招标企业、供应商提供强大的专业招标采购信息查询和相关服务,中国第一招标网",
						imgUrl: "https://img.bidcenter.com.cn/app/images/logo.png"
					};
					plus.share.sendWithSystem({
						type: "text",
						title: shareInfo.title || "",
						thumbs: [shareInfo.imgUrl || ""],
						href: shareInfo.href || "",
						content: shareInfo.desc || "",
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		font-size: 14px;
		height: 100%;
	}

	.classdip,
	.disdip,
	.cidp,
	.ddpi,
	.ssie,
	.ppisd,
	.pidss,
	.hfds,
	.erdg,
	.fuioj,
	.grdhd,
	.dpdis,
	.isid,
	.dnxkig,
	.sekjg,
	.diowen {
		display: none;
	}

	.status-bar {
		height: 60rpx;
		background-color: #fff;
	}

	.text-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.uni-navbar__content_view {
		width: 36%;
	}

	.youxiang {
		padding: 0 10px;
		height: 50rpx;
		border: 1px solid #2e68e1;
		border-radius: 50rpx;
		text-align: center;
		line-height: 50rpx;
		color: #2e68e1;
		background-color: #fff;
		margin-left: 20rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		line-height: 50rpx;

		.youx-img {
			width: 35rpx;
			height: 27rpx;
			margin-right: 5px;
		}
	}


	.detatil-content {
		width: 92%;
		padding: 180rpx 4%;

		.detail-title {
			font-size: 40rpx;
			line-height: 50rpx;
			letter-spacing: 5rpx;
		}



		.zhengwen {
			position: relative;
			z-index: 1;

			.zhengwen-text {
				color: #2e2e2e;
				font-size: 32rpx;
				line-height: 50rpx;
			}

			.zhengwen-text-more {
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
				-webkit-text-overflow: ellipsis;
				line-clamp: 6;
				-webkit-line-clamp: 6;
			}

			.zhengwen-more {
				text-align: center;
				color: #5481e7;
				background-color: #fff;
				margin-top: 10px;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;

				.zhengwen_mask {
					position: absolute;
					left: 0;
					right: 0;
					top: -78px;
					height: 78px;
					background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);

				}

				.more-btn {
					text-align: center;
					font-size: 30rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						vertical-align: text-bottom;
						margin-right: 5px;
					}
				}

			}
		}
	}

	.apply-fixed {
		position: fixed;
		z-index: 99;
		bottom: 120rpx;
		width: 90%;

		.guanggao-img {
			width: 100%;
			height: 126rpx;
		}

		.guanggao-close {
			width: 60rpx;
			height: 58rpx;
			position: absolute;
			right: -20rpx;
			top: -10rpx;
		}
	}

	.footer {
		position: fixed;
		bottom: 0px;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1 1;
		background-color: #fff;
		padding: 15rpx 30px;
		box-sizing: border-box;
		width: 100%;

		.footer-input {
			padding: 20rpx 0rpx;
			background-color: #f6f6f6;
			border-radius: 20px;

			input {
				padding-left: 20rpx;
				font-size: 28rpx;
			}
		}

		.footer-icon {
			display: flex;
			width: 48rpx;
			height: 46rpx;
			margin-left: 20px;

			image {
				width: 48rpx;
				height: 46rpx;

			}
		}

		.footer-collage {
			background: url(/static/img/Details/detail_21.png) no-repeat;
			background-size: 100% 100%;
			width: 48rpx;
			height: 46rpx;
			margin-left: 20px;
		}

		.footer-collaged {
			background: url(/static/img/Details/collaged.png) no-repeat;
			background-size: 100% 100%;
			width: 48rpx;
			height: 46rpx;
			margin-left: 20px;
		}
	}

	.youxiang-pop {
		width: 100%;

		.youxiang-pop_content {
			width: 90%;
			margin-left: 5%;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx 0;

			.youxiang_img {
				width: 252rpx;
				height: 129rpx;
				display: block;
				margin: 0 auto;
			}

			.youxiang_text1 {
				text-align: center;
				color: #3a8bff;
				font-weight: 700;
				margin: 20rpx 0;
				font-size: 32rpx;
			}

			.youxiang_text2 {
				text-align: center;
				color: #95999a;
				font-size: 30rpx;
			}

			.youxiang_input {
				width: 90%;
				margin: 20rpx auto;
				background-color: #f1f1f1;
				border-radius: 40rpx;
				padding: 20rpx 0;

				input {
					padding-left: 30rpx;
					color: #333;
				}
			}

			.youxiang-btn {
				width: 90%;
				margin: 0 auto;
				background-color: #3a8bff;
				color: #fff;
				text-align: center;
				border-radius: 40rpx;
				padding: 20rpx 0;
				font-size: 30rpx;
			}

			.youxiang-tips {
				width: 90%;
				margin: 20rpx auto 0;
				font-size: 24rpx;
			}
		}
	}

	.deatail-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0 30rpx 0rpx;
		padding-top: 60rpx;
		padding-right: 40rpx;


		.detail-head-right {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}

	.head-fixed {
		position: fixed;
		top: 0;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 10;
	}

	.telIcon {
		display: none;
	}




	.share {
		margin-left: 20rpx;
		height: 35rpx;
		width: 35rpx;

		.share-img {
			width: 35rpx;
			height: 35rpx;
		}
	}

	.star-time {
		color: #505050;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.daojishi {
		display: flex;
		border: 1px dashed #ff7777;
		border-radius: 10rpx;
		padding: 10rpx 0;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0;
		color: #ff0018;
		font-size: 30rpx;

		.naozhong {
			width: 45rpx;
			height: 46rpx;
			margin-right: 10rpx;
		}
	}

	.fengxianTips {
		background-color: #f5f5f5;
		color: #2f69e0;
		font-size: 28rpx;
		border-radius: 10rpx;
		padding: 10rpx 15rpx;
		margin-bottom: 20rpx;
	}

	.miaoshu-title {
		font-size: 30rpx;
		color: #a3a3a3;
	}

	.huiyuan_close {
		margin: 20rpx auto;

		.close-img {
			width: 71rpx;
			height: 65rpx;
			margin: 0 auto;
			display: block;
		}
	}
</style>
